import {RouterLink} from "vue-router";
import {Component, Hook, Mut, VueComponent, Link, ComponentProps} from 'vue3-oop'
import {NButton, NSpace, NCard, NFormItem, NInput, NForm, PaginationProps, DialogReactive, NTag} from 'naive-ui'
import DynaTablePanel from "@/components/panel/DynaTablePanel2"
import styles from './index.module.scss'
import RoleApi from './RoleApi'

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class RolelistView extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth:{default:800},
    maxHeight:{default:600}
  }

  constructor() {
    super()
  }

  @Mut() state = {
    columns: [
      {
        key: "id",
        title: "ID",
        render: (row:any)=>(<RouterLink to={`/main/userprms/role/detail/${row.id}`}>{row.id}</RouterLink>)
      },{
        key: "name",
        title: "角色名"
      },{
        key: "code",
        title: "编码"
      },{
        key: "SYS_ROW_ACTIONS",
        title: "操作",
        render: (row:any)=>(<NSpace size="small">
          <NButton onClick={()=>{
            RoleApi.delete({
              params:{
                id: row.id
              }
            }).then(({data})=>{
              this.triggerSearch();
            })
          }}
          >删除</NButton>
        </NSpace>)
      }
    ] as any[],
    records: [] as any[],
  }

  private rowKey=(row:any)=>row.id;

  @Mut() pagination = {
    showSizePicker: true,
    pageSizes: [10,20,50,100],
    pageSize: 10,
    page: 1,
    itemCount: 0,
    showQuickJumper: true,
    onUpdatePage: (page:number) => {// 切换页
      this.pagination.page = page;
      this.triggerSearch();
    },
    onUpdatePageSize: (size:number) => {// 切换页大小
      this.pagination.pageSize = size;
      this.pagination.page = 1;
      this.triggerSearch();
    },
    prefix: ()=>(
      <NSpace>
        <NTag >总共 {this.pagination.itemCount} 项</NTag>
      </NSpace>
    )
  } as PaginationProps;

  // 快速搜索
  private handleQuickSearch=(value:string)=>{
    console.log("handleQuickSearch",value);
    this.triggerSearch();
  }

  // 触发查询
  triggerSearch=()=>{
    RoleApi.page({
      params:{},
      page:{size:this.pagination.pageSize,current:this.pagination.page}
    }).then(({data})=>{
      const { page,record } = data;
      this.pagination.itemCount = page.total;
      this.state.records = record;
    })
  }

  // 打开新建对话框
  openCreateDialog=()=>{
    const formData = ref({code:"",name:""}).value;
    const hendleCreate=()=>{
      RoleApi.create({
        record:{code:formData.code,name:formData.name}
      }).then(({data})=>{
        if(data.success){
          window.$message.success("角色创建成功")
        }else{
          window.$message.success("角色创建成功")
        }
      }).finally(()=>{
        this.triggerSearch();
      })
    }
    const dialog = window.$popUp({
      style: {width:"500px",height:"300px"},
      content:()=>(
        <NCard title={"新建角色"}>
          {{
            default:()=>(
              <NForm labelPlacement={"left"}>
                <NFormItem label='编码' required={true}><NInput value={formData.code} onUpdateValue={(value)=>{formData.code=value}} /></NFormItem>
                <NFormItem label='名称' required={true}><NInput value={formData.name} onUpdateValue={(value)=>{formData.name=value}} /></NFormItem>
              </NForm>
            ),
            footer:()=>(<NSpace>
              <NButton size={"small"} onClick={()=>{hendleCreate();dialog.destroy();}}>确定</NButton>
              <NButton size={"small"} onClick={()=>{dialog.destroy()}}>取消</NButton>
            </NSpace>)
          }}
        </NCard>
      )
    }) as DialogReactive;
  }

  @Hook('Mounted')
  onMounted(){
    this.triggerSearch();
  }

  render() {

    return (
      <DynaTablePanel
        class={[styles.role_list_view]}
        icon={"Guardian24Filled"}
        title={"角色列表"}
        showQuickSearch={true}
        showSeniorSearch={true}
        onQuickSearch={this.handleQuickSearch}
        nDataTableProps={{
          rowKey:this.rowKey,
          columns:this.state.columns,
          data:this.state.records,
          pagination:this.pagination,
          maxHeight:this.props.maxHeight as number - 155
        }}
        toolbarActions={[{
          name:"新建",
          needCheck:false,
          inMore:false,
          onClick:this.openCreateDialog
        }]}
      />
    )
  }
}
